<template>
	<view>
		<view class="attention-wrap">
			<text class="attention-myInterest1" @click="bianjis">{{bianji}}</text>
			<text class="attention-myInterest2">我收藏的帖子</text>
		</view>
		<!-- <view class="attention-wrap-bianji">
			<image src="../../static/bianji.png" mode=""></image>
		</view>
		 -->
		<block v-for="(item,index) in mycollect" :key="index">
			<view class="attention-wrap-guanzhu-wrap-all" @click="itemId(item.myid)">
				<view class="attention-wrap-guanzhu">
					<view class="dis-guanzhu-image">
						<image :src="item.res.avatarUrl" mode="" class="alverter-guanzhu"></image>
						<view class="dis-guanzhu-txt">
							<text>{{item.res.nickName}}</text>
						</view>
					</view>
					<view v-if="deleteshow">
						<image src="../../static/delete.svg" mode="" class="delete-mycellect" @click.stop="deleteMyC(item.myid)"></image>
					</view>
					<image src="../../static/rightjiantou1.png" mode="" class="alverter-jiantou"></image>
				</view>
				<view class="pistion-my-dingwei">
					<text class="stywzs">收藏标题：{{item.res.textarea}}</text>
					<view class="overfloat-my-title">
						查看详情
					</view>
				</view>
			</view>
		</block>
		
		<!-- 无数据显示 -->
		<view v-if="showsdata">
			<vue-kong></vue-kong>
		</view>
		<!-- 进入页面加载 -->
		<view v-if="showLoading">
			<home-load></home-load>
		</view>
		
		<!-- 上拉加载动画 -->
		<view v-if="uploadShow">
			<uploading></uploading>
		</view>
		
		<view class="noneData" v-if="noneData">
			<text>没有更多数据了...</text>
		</view>
		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>

	</view>
</template>

<script>
	//顶部消息提示插件
	 import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"
	
	import getData from '../../components/getData.js'
	export default {
		data() {
			return {
				showsdata:true,
				mycollect: [],
				pageId:0,
				noneData:false,
				uploadShow:false,
				showLoading:true,
				deleteshow:false,
				bianji:'编辑'
			}
		},
		components:{
			HMmessages
		},
		methods: {
			//收藏
			getShoucang() {
				let databaseUp = 'collect'
				getData(databaseUp).then(res => {
					console.log(res.data)
					if(res.data.length==0){
						this.showsdata=true
						this.showLoading = false
					}else{
						this.mycollect = res.data
						this.showsdata=false
						this.showLoading = false
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//编辑
			bianjis(){
				this.bianji = this.bianji=="完成"? '编辑':'完成'
				if(this.bianji=='完成'){
					this.deleteshow = true
				}else{
					this.deleteshow = false
				}
			},
			//上拉加载
			onReachBottom(){
				this.uploadShow = true
				this.pageId++
				const db =wx.cloud.database()
				db.collection('collect')
					.limit(4)
					.skip(this.pageId * 4)
					.orderBy('time','desc')
					.get()
					.then(res => {
						if(res.data.length==0){
							this.uploadShow = false;
							this.noneData = true
						}
						// console.log(res)
						//请求下来合并到一起
						this.mycollect = [...this.mycollect, ...res.data]
						this.uploadShow = false
						this.noneData = true
					}).catch(err => {
						console.log(err)
					})
			
			},
			
			//删除
			deleteMyC(ids){
				// console.log(index)
				const db = wx.cloud.database().collection('collect').where({
					myid:ids
				}).remove().then(res=>{
					// console.log(res)
					this.HMmessages.show("删除成功！",{icon:'success',fontColor:'#000000',background:'#24f416',iconColor:'#000000'})
					this.getShoucang()
					this.pageId=0;
				}).catch(err=>{
					console.log(err)
					this.HMmessages.show("删除失败！",{icon:'success',fontColor:'#000000',background:'#f40004',iconColor:'#000000'})
				})
			},
			//查看详情点击跳转
			itemId(ids){
				wx.navigateTo({
					url: '../details/details?id=' + ids
				})
			}
		},
		onLoad() {
			this.getShoucang()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}
	.attention-wrap-bianji{
		position: absolute;
		top:20upx;right: 5upx;
		text{
			padding: 10upx 20upx;
			border-radius: 15upx;
			border: 1px solid #ff4c20;
			color: #ffffff;
		}
		image{
			width: 50upx;
			height: 50upx;
			
		}
	}

	.attention-wrap {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10upx;
		width: 100%;
		height: 500upx;
		background-image: linear-gradient(to top, #55ffff 5%, #1995e7 100%);
		border-bottom-right-radius: 40upx;
		border-bottom-left-radius: 40upx;

		.attention-myInterest1 {
			color: #000000;
			border-radius: 15upx;
			background-color: #00aaff;
			box-shadow: 0 0 20upx rgba(0,0,0,0.4);
			// border: 1px solid #5500FF;
			padding: 20upx 40upx;
		}

		.attention-myInterest2 {
			color: #000000;
			font-family: "微软雅黑";
			font-size: 50upx;
			font-weight: bold;
		}
	}

	.attention-wrap-guanzhu-wrap-all {
		background-color: #ffffff;
		border-radius: 20upx;
		margin-bottom: 10upx;
		padding: 15upx;
		.pistion-my-dingwei{
			position: relative;
			.overfloat-my-title{
				position: absolute;
				bottom: 0;right: 0;
				background-color: #5555ff;
				border-radius: 15upx;
				margin-right: -6px;
				color: #FFFFFF;
				padding: 7upx 15upx;
			}
		}
		.stywzs{
			color: #000000;
			font-size: 30upx;
			white-space: nowrap;
			overflow: hidden; 
			font-weight: bold;
		}
	}

	.attention-wrap-guanzhu {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 200upx;
		box-sizing: border-box;
		.delete-mycellect{
			width: 30upx;
			height: 30upx;
			padding: 15upx;
		}
		.dis-guanzhu-image {
			display: flex;
			justify-content: center;
			align-items: center;

			.dis-guanzhu-txt {
				color: #2d2d2d;
				font-size: 35upx;
			}
		}

		.alverter-guanzhu {
			width: 80upx;
			height: 80upx;
			border-radius: 15upx;
			margin-right: 18upx;
		}

		.alverter-jiantou {
			width: 60upx;
			height: 60upx;
		}
	}
	.noneData{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30upx;
		text{
			color: #007AFF;
		}
	}
</style>
